import { useNavigate, useSearchParams } from 'react-router-dom'
import './index.scss'
import copy from 'clipboard-copy'
import { URL } from '../../api/http-url'
import { message } from 'antd'

function MyInvite() {
  const navigate = useNavigate()
  const [params] = useSearchParams()
  const id = params.get('id')

  const copyLink = () => {
    const link = `${URL}/inviteFriend?id=${id}`;
    copy(link).then(res => {
      message.success('copy success');
    })
  }

  const goBack = () => {
    navigate(-1);
  }

  return (
    <div className='my-invite'>
      <div className='top'>
        <div className='top-item'>Asfd…ADSF+124</div>
        <div className='top-item'>Asfd…ADSF+124</div>
        <div className='top-item'>Asfd…ADSF+224</div>
        <div className='top-item'>Asfd…ADSF+1213</div>
        <div className='top-item'>Asfd…ADSF+124</div>
      </div>

      <div className='first-title'>Add quantity without adding price, </div>
      <div className='second-title'>pack together and take away</div>

      <div className='active-rule'>
        <div className='rule-active'>Activity rules</div>
        <div className='rule-list'>
          <div className='rule-item'>
            <div className='item-index'>1</div>
            <div className='item-content'>Up to a maximum of 20% free bonus can be obtained, with less than one item counted as one.</div>
          </div>
          <div className='rule-item'>
            <div className='item-index'>2</div>
            <div className='item-content'>Invited users can assist in adding volume when they are not logged in (limited to adding volume once for the same IP)</div>
          </div>
          <div className='rule-item'>
            <div className='item-index'>3</div>
            <div className='item-content'>Friends can earn 0.1% to 1% of each boost, and the boost ends when it reaches 20%.</div>
          </div>
          <div className='rule-item'>
            <div className='item-index'>4</div>
            <div className='item-content'>Friends who assist can receive 1 e-cigarette if they make any purchases, and a complimentary gift will be<br/>included in the purchase order.</div>
          </div>
        </div>
      </div>

      <div className='sign'>
        <div>The current order has been increased for free by<span>8.22%</span></div><br/>
        <div>Approximately <span>12.23</span>units in total</div>
      </div>

      <div className='opt'>
        <div className='copy' onClick={copyLink}>Copy invitation link</div>
        <div className='return' onClick={goBack}>Return</div>
      </div>
      <div className='bottom-box'></div>
    </div>
  )
}

export default MyInvite